<template>
  <div class="alarm-info">
    <div class="row">
      <span class="row-title">工作面名称：</span>
      <span>{{ info.name || '--' }}</span>
    </div>
    <div class="flex">
      <div class="row">
        <span class="row-title">工作面状态：</span>
        <span>{{ info.engStatus || '--' }}</span>
      </div>
      <div class="row">
        <span class="row-title">里程：</span>
        <span>{{ info.hdlc || '--' }}</span>
      </div>
    </div>
    <div class="row">
      <span class="row-title">巷道煤岩性质：</span>
      <span>{{ info.myxz || '--' }}</span>
    </div>
    <div class="row">
      <span class="row-title">采掘关键环节：</span>
      <span>{{ info.cjgjhj || '--' }}</span>
    </div>
    <div class="flex">
      <div class="row">
        <span class="row-title">地测预报：</span>
        <span>{{ info.dcyb || '--' }}</span>
      </div>
      <div class="row">
        <span class="row-title">掘进方式：</span>
        <span>{{ info.jjfs || '--' }}</span>
      </div>
    </div>
    <div class="flex">
      <div class="row">
        <span class="row-title">原始瓦斯含量：</span>
        <span>{{ info.yswshl || '--' }}</span>
      </div>
      <div class="row">
        <span class="row-title">残余瓦斯含量：</span>
        <span>{{ info.cywshl || '--' }}</span>
      </div>
    </div>
    <div class="flex">
      <div class="row">
        <span class="row-title">单元瓦斯抽采负压：</span>
        <span>{{ info.dywsccfy || '--' }}</span>
      </div>
      <div class="row">
        <span class="row-title">单元瓦斯抽采流量：</span>
        <span>{{ info.dywsccll || '--' }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getEngInfoByCdCode } from '@/api/road'
import { ref, onMounted } from 'vue'

const props = defineProps<{
  cdCode: String
}>()

const info = ref({})
onMounted(async () => {
  const { data } = await getEngInfoByCdCode(props.cdCode)
  info.value = data
})
</script>
<style scoped lang="scss">
.alarm-info {
  position: relative;
  background-color: var(--bg-color-page);
  height: 100%;
  padding: 8px;
  color: #cecece;

  .empty-box {
    position: relative;
    display: flex;

    flex: 1;
    min-width: 150px;
  }

  .flex {
    display: flex;
  }

  .row {
    flex: 1;
    margin-bottom: 5px;

    .row-title {
      color: #5C7A70
    }
  }
}
</style>
